<script setup>
import { ElMessage } from 'element-plus'
import router from '../router'
import { UserInfoService } from '../api/user'
import { ref } from 'vue';
import { onBeforeMount } from "vue"

const name = ref('')

onBeforeMount(async () => {
    let result = await UserInfoService()
    name.value = result.data.name
})

// const handleForceRefresh = (item) => {
//     console.log(item)
//     // window.location.reload()
// }

// const getName = async() => {
//     let result = await UserInfoService()
//     name.value = result.data.name
// }

const outLogin = () => {
    localStorage.removeItem('Authorization')
    ElMessage.success('退出登录成功')
    router.push('/login')
}

const isHovered = ref(false)

// const isHover = () => {
//     console.log("running")
//     hover_flag.value = hover_flag.value ? false : true
// }

</script>

<template>
    <div class="big_box">
        <img src="../../public/logo.png" class="nchu-log">
        <!-- <div style="width: 200px;padding-left: 30px;font-weight: bold;color: rgb(19, 179, 232);"></div> -->
        <div style="flex: 1;">
            <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                text-color="#ffffff" router>
                <el-menu-item index="/">首页</el-menu-item>
                <el-menu-item index="/detect_result" >检测结果</el-menu-item>
            </el-menu>
        </div>
        <div style="width: 150px;">
            <el-dropdown>
                <span class="el-dropdown-link" @mouseover="isHovered = true" @mouseleave="isHovered = false">
                    {{ name }}
                    <el-icon v-if="!isHovered" class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                    <el-icon v-else class="el-icon--right">
                        <arrow-up />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <!-- <el-dropdown-item>个人信息</el-dropdown-item> -->
                        <el-dropdown-item @click="outLogin">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>


<style>
.el-dropdown-link {
    color: aliceblue;
    font-size: 20px;
    margin-top: 30px;
    outline: none;
}

.big_box {
    height: 70px;
    line-height: 80px;
    /* border-bottom: 1px solid #ccc; */
    background-color: #06669d;
    display: flex;
}

.nchu-log {
    width: 190px;
    height: 45px;
    margin-top: 12.5px;
    margin-left: 25px;
}

.el-menu-demo {
    height: 100%;
    background: none;
    border: none;
    margin-left: 30px;
    /* margin-top: 10px; */
}
</style>